---
type: tutorial
title: Astroでの最初の一行
description: |-
  「初めてのAstroブログ」チュートリアル -
  チュートリアルプロジェクトのホームページに最初の編集を加える
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 新しいウェブサイトに最初の編集を加える
</PreCheck>

## ホームページを編集する

<Steps>
1. コードエディターのファイルエクスプローラーペインで`src/pages/index.astro`に移動し、これをクリックしてファイルの内容を編集可能なタブで開きます。

    `index.astro`ファイルの内容は以下のようになっています。

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. ページの`<body>`の内容を編集します。

    エディターでページの見出しテキストを変更し、変更を保存します。

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>私のAstroサイト</h1>
    </body>
    ```

3. ブラウザ上のプレビューを確認すると、ページの内容が新しいテキストに更新されているはずです。
</Steps>

おめでとうございます！あなたはもうAstroの開発者です！

このユニットの残りの部分では、バージョン管理と、人に自慢できるようウェブサイトを公開する方法について説明します。


<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] 変更した内容をブラウザで確認できる。
- [ ] 私はAstroの開発者だ！
</Checklist>
</Box>
